<template>
  <div v-for="pet in petList" :key="pet.petId" class="pa-card">
    <div class="my-row-2">
      <div class="left">
        <img :src="'/api/common/download?name='+pet.petPhoto" alt="宠物" class="my-avatar"/>
      </div>
      <div class="right">
        <el-descriptions :column="3" :title="pet.petName" border>
          <el-descriptions-item
              align="center"
              label="品种"
              label-align="right">
            <el-tag>{{ pet.petVariety }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item align="center" label="健康状况" label-align="right">
            <el-tag>{{ pet.petStatus }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item align="center" label="年龄" label-align="right">
            {{ getAge(pet.petAge) }}岁
          </el-descriptions-item>
          <el-descriptions-item align="center" label="性别" label-align="right">
            <TagSex :sex="pet.petSex"/>
          </el-descriptions-item>
          <el-descriptions-item align="center" label="操作" label-align="right">
            <el-button type="success" @click="$router.push('/reception/petOne/'+pet.petId)">详情
            </el-button>
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
    <el-empty v-if="petList.length===0" description="暂无宠物"/>
  </div>
</template>

<script lang="ts" setup>
import {Pet} from "@/model/entiy/Pet";
import {getAge} from "@/utils/TimeUtil";
import TagSex from "@/components/show/TagSex.vue";
import {onMounted, ref} from "vue";
import {reqClientPet} from "@/request/PetApi";

const petList = ref<Pet[]>([]);
onMounted(() => {
  reqClientPet().then(res => {
    petList.value = res
  })
})
</script>

<style lang="scss" scoped>
@import url("/css/pa-card.css");

.pa-card {
  background-color: #fff5f7; /* 浅粉色背景 */
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 2px 12px 0 rgba(255, 182, 193, 0.3); /* 粉色阴影 */

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px 0 rgba(255, 182, 193, 0.4);
  }
}

.my-row-2 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-areas: "left right right right";

  @media screen and (max-width: 992px) {
    grid-template-columns: 1fr;
    grid-template-areas:"left" "right";
  }

  .left {
    grid-area: left;
    display: flex;
    justify-content: center;
    align-items: center;

    img.my-avatar {
      border-radius: 50%;
      width: 128px;
      height: 128px;
      border: 3px solid #ffb6c1; /* 粉色边框 */
      box-shadow: 0 2px 8px rgba(255, 182, 193, 0.5);
    }
  }

  .right {
    grid-area: right;

    :deep(.el-descriptions) {
      .el-descriptions__title {
        color: #ff69b4; /* 粉色标题 */
        font-size: 18px;
        font-weight: bold;
      }

      .el-descriptions__header {
        margin-bottom: 12px;
      }

      .el-descriptions__body {
        background-color: #fff;

        .el-descriptions-item__cell {
          padding: 12px;
        }

        .el-tag {
          background-color: #ffebee; /* 浅粉色标签背景 */
          color: #d81b60; /* 深粉色文字 */
          border-color: #f8bbd0;
        }
      }
    }
  }
}

.el-button--success {
  background-color: #ff69b4; /* 粉色按钮 */
  border-color: #ff69b4;

  &:hover {
    background-color: #ff1493;
    border-color: #ff1493;
  }
}

.el-empty {
  :deep(.el-empty__description) {
    p {
      color: #ff69b4;
    }
  }
}
</style>